import React from 'react'
import { Layout,Menu } from 'antd';
import {HomeOutlined,TeamOutlined,ToolOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
const {Sider}=Layout

export default function SideMenu({collapse}) {
  const navigate=useNavigate()
  const changeMenu=({key})=>{
    navigate(key)
  } 
  return (
    <Sider>
      <div className='sider-title'>新闻发布管理系统</div>
      <Menu
        onClick={changeMenu}
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['4']}
        items={menuList}
      />
    </Sider>
  )
}
const menuList=[
  {
    key:'/home',
    label:'首页',
    icon:<HomeOutlined />
  },
  {
    key:'/user-manage',
    label:'用户管理',
    icon:<TeamOutlined />,
    children:[
      {
        key:'/user-manage/list',
        label:'用户列表'
      },
    ]
  },
  {
    key:'/power-manage',
    label:'权限管理',
    icon:<ToolOutlined />,
    children:[
      {
        key:'/power-manage/power-list',
        label:'权限列表'
      },
      {
        key:'/power-manage/charactor-list',
        label:'角色列表'
      },
    ]
  }
]